<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts集成 - 折线图</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="/layuiadmin/layui/css/layui.css"
	media="all">
<link rel="stylesheet" href="/layuiadmin/style/admin.css"
	media="all">
</head>
<body>

	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">新增会员折线图</div>
					<div class="layui-card-body">
						<div class="layui-carousel layadmin-carousel layadmin-dataview"
							data-anim="fade" id="diffline">
						</div>
					</div>
				</div>
				<div class="layui-card">
					<div class="layui-card-header">会员统计图</div>
					<div class="layui-card-body">
						<div class="layui-carousel layadmin-carousel layadmin-dataview"
							data-anim="fade" id="pie">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<script src="/layuiadmin/layui/layui.js"></script>
	<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
	<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
	<script>
		$(function(){
			var xData = [];
			var pieseries = [{}];
			var lineseries = [];

			$.ajaxSettings.async = false;
			$.post("/statis/queryCustomerStatisPie",function(result){
				var data = result.data;
				pieseries[0].name = '用户来源';
				pieseries[0].type = 'pie';
				pieseries[0].radius = '55%';
				pieseries[0].center = ['50%', '60%'],
				pieseries[0].data = data;
			});
			$.post("/statis/queryCustomerStatisDiffline?type=month",function(result){
				var data = result.data;
				xData = data.date;
				lineseries = data.series;
				for (var i = 0; i <lineseries.length; i++){
					lineseries[i].type = 'line';
					lineseries[i].symbolSize = 10;
					lineseries[i].symbol = 'circle';
					lineseries[i].smooth = true;
				}
			});
			$.ajaxSettings.async = true;
			console.log(lineseries);
			var echarts1 = echarts.init(document.getElementById('pie'));
			var echarts1_option = {
				title: {
					show: false,
				},
				tooltip: {
					trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					orient : 'vertical',
			        x : 'left',
			        data:['APP','Wechat','PC','小程序']
				},
				series: pieseries[0]
			}
			echarts1.setOption(echarts1_option);
			
			var echarts2 = echarts.init(document.getElementById('diffline'));
			var echarts2_option = {
				title: {
					show: false,
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					x : 'center',
					y : 'top',
					data: ['APP','Wechat', 'PC', '小程序']
				},
				xAxis: {
					data: xData,
				},
				yAxis:{
					type: 'value',
					nameTextStyle: {
						// 坐标轴名称的文字样式
					},
					axisLine: {
						// 坐标轴轴线相关设置
					}
				},
				series: lineseries
			}
			echarts2.setOption(echarts2_option);
		});
	</script>
</body>
</html>